<template>
	<view class="share-box" v-if="show">
		<u-mask :show="show"></u-mask>
		<view class="container" data-istask="0" data-type="topic" data-cid="0">
			<!-- 选择模板loading界面 -->
			<view class="module-loading" style="visibility: hidden;">
				<view class="looping-rhombuses-spinner">
					<view class="rhombus"></view>
					<view class="rhombus"></view>
					<view class="rhombus"></view>
				</view>
			</view>
			<view class="invite-share">
				<img src="https://static1.weizan.cn/zhibo/images/coupon/coupon_save.png">
			</view>
			<!-- 生成图片容器 -->
			<view class="invite-con">
				<!-- 图片生成 -->
				<!-- 右下角二维码 -->
				<!-- <view class="code-box">
		                <img src="https://static1.weizan.cn/zhibo/livecontent/invitecard/images/conde-img.png" />
		            </view> -->
			</view>
			<view class="close"><i class="iconfont iconguanbi"></i></view>
			<img :src="base64" mode="" style="width: 80%;"></img>
			<view class="" style="padding: 10rpx 0;">
				<u-icon name="close" color="#fff" size="48" @click="close"></u-icon>
			</view>

			<!-- <view @click="toImg()">导出报价</view> -->
			<view id="poster" ref="box" v-show="isShow" style="position: absolute; bottom: -888px;">
				<view class="back-img">
					<view class="back-top">
						<view class="back-left">

						</view>
						<view class="back-right">
							<view class="right-text">
								用户{{infrom.id}}
							</view>
							<view class="">
								邀请您来一起看直播
							</view>
						</view>
					</view>
					<view class="back-content">
						{{infrom.title}}
					</view>
					<view class="back-time">
						<view class="back-f">
							开播时间
						</view>
						<view class="back-s">
							{{formatTimestamp(infrom.start_at)}}
						</view>
					</view>

					<view class="back-foot">
						<view class="back-title">
							<view>
								—————6711
							</view>
							<view>
								长按识别 立即观看
							</view>
						</view>
						<view class="back-wx">
							<img src="../../static/download.png" alt="" />
						</view>
					</view>

				</view>
			</view>
			<!-- 		<image :src="base64" mode=""></image>
 <view id="poster" ref="box">
        <div>价目表产品报价</div>
            <u-table>
                <u-tr>
                    <u-th>銷售信息</u-th>
                </u-tr>
                
                <u-tr>
                    <u-th>学校</u-th>
                
                </u-tr>
                <u-tr>
                    <u-td>浙江大学</u-td>
                    <u-td>二年级</u-td>
                    <u-td>22</u-td>
                </u-tr>
                <u-tr>
                    <u-td>清华大学</u-td>
                    <u-td>05班</u-td>
                    <u-td>20</u-td>
                </u-tr>
            </u-table>
        </view>
		<view @click="toImg()">导出报价</view> -->
			<!-- 底部选择模板区域 -->
			<!-- <view class="module" id="f-module-box" style="display: block;">


				<view class="module-list">

					<ul class="my-ul">

					</ul>







					<view class="f-qrcode">
						<img class="f-qrcode-icon"
							src="https://static1.weizan.cn/zhibo/livecontent/invitecard/images/qrcode_icon.svg">
						<view class="f-qrcode-text">二维码</view>
					</view>


				</view>
			</view> -->

			<!-- <view class="live_qrcode" style="display:none;"></view> -->

			<!-- fpd 点击自定义弹窗 -->
			<!-- 	<view class="f-custom-box">
				<view class="f-custom-con">
					<view class="f-custom-msg">
						<view class="f-custom-bg">
							<img id="share-card-template"
								src="https://j.weizan.cn/zhibo/livecontent/invitecard/v2/h5_share_card_template.jpg?ver=638429829609334579">
						</view>
						<view class="f-custom-bottom">
							<view class="f-custom-bottom-cancel">取消</view>
							<view class="f-custom-bottom-upload">
								上传背景图
								<input onchange="PCUpload('uploadImg_pd')" type="file" id="uploadImg_pd"
									name="uploadImg_pd" accept="image/png, image/jpg, image/jpeg">
							</view>
						</view>
					</view>
				</view>
			</view> -->


			<!-- 点击二维码弹窗 -->
			<!-- 	<view class="scan-box" style="display: none;">
				<view class="scan-con" style="bottom: -999px;">
					<view class="close-btn">
						<img src="https://static1.weizan.cn/zhibo/livecontent/invitecard/images/scan-close-btn.png">
					</view>
					<view class="scan-con-msg">
						<view class="title">
						
							<view class="title-icon-left"></view>
							<span>保存二维码或链接进行分享</span>
							<view class="title-icon-right"></view>
							
							
						</view>
						<p>
							二维码过期时间为：<span class="validtime">2024-03-27</span>
						</p>
					</view>
					<view class="scan-con-link">
						<view>
							<view class="link" id="link">https://sr.vzan.com/DN5lvN</view>
							<view class="copy-btn" data-clipboard-target="#link">复制</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
import html2canvas from 'html2canvas';
import jspdf from 'jspdf';
export default {
	name: "share",
	props: {
		show: Boolean,
		infrom:Object
	},
	data() {
		return {
			// show: true,
			base64: '',
			isShow: true
		};
	},
	created() {
		let app = this;
		// setTimeout(function () {
		// 	app.toImg();
		// }, 50)

	},
watch: {
    show: function(newVal, oldVal) {
		let app = this;
      if (newVal) {
		  this.isShow = true;
        // Reload data in the child component when showChild changes to true
  setTimeout(function () {
  	app.toImg();
  }, 0)
  
      }
    }
  },
	methods: {
		 formatTimestamp(timestamp) {
		    // 创建一个新的Date对象，将时间戳作为参数传入
		    var date = new Date(timestamp);
		    
		    // 使用Date对象的方法来获取年、月、日、时、分、秒
		    var year = date.getFullYear();
		    var month = date.getMonth() + 1; // 月份是从0开始计数的，所以要加1
		    var day = date.getDate();
		    var hours = date.getHours();
		    var minutes = date.getMinutes();
		    var seconds = date.getSeconds();
		    
		    // 将获取到的时间信息拼接成想要的格式
		    var formattedDate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
		    
		    return formattedDate;
		},
		close() {
			this.$emit('close', false);
		},
		toImg() {
			console.log(2323, "toImg")
			// window.document.getElementById(=)
			// 使页面滑到顶部，避免顶部出现白边
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			})

			// var dom = this.$refs.box || window.document.documentElement('#poster'); // 获取dom元素
			let dom = window.document.getElementById('poster')
			// console.log()
			html2canvas(dom, {
				width: dom.clientWidth || '100rpx', //dom 原始宽度
				height: dom.clientHeight || '100rpx',
				// width: '100rpx', //dom 原始宽度
				// height:  '100rpx',
				scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
				scrollX: 0,
				useCORS: true, //支持跨域，但好像没什么用
			}).then((canvas) => {
				// 将生产的canvas转为base64图片
				this.base64 = canvas.toDataURL('image/png')
				setTimeout(() => {
					this.isShow = false;
				}, 0)

			});
		},
	}
}
</script>

<style lang="scss" scoped>
.share-box {

	// position: fixed;
	// width: 100%;
	// max-width: 750px;
	// height: 100%;
	// margin: 0 auto;
	// padding-bottom: 11.5rem;
	// background-color: #1c1b20;
	// box-sizing: border-box;
	.container {
		position: absolute;
		top: 0;
		width: 100%;
		text-align: center;
		// max-width: 750px;
		height: 100vh;
		z-index: 999999;
		margin: 0 auto;
		// padding-bottom: 11.5rem;
		// background-color: #1c1b20;
		box-sizing: border-box;

		.invite-share {
			width: 400rpx;
			// height: 5.5rem;
			margin: 0 auto;
			padding: 40rpx 0 40rpx 0;

			img {
				width: 400rpx;
			}
		}
	}

	.back-img {
		background: url(../../static/bg_noCover.png)no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 600px;
		padding: 60rpx;

		.back-top {
			display: flex;

			.back-left {
				margin-right: 20rpx;
			}

			.back-right {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				color: #fff;

				.right-text {
					color: #fff;
					font-size: 36rpx;
				}
			}
		}

		.back-content {
			color: #fff;
			font-size: 66rpx;
			display: -webkit-box;
			/* Safari */
			overflow: hidden;
			-webkit-line-clamp: 2;
			/* Safari and Chrome */
			line-clamp: 2;
			/* Standard syntax */
			-webkit-box-orient: vertical;
			/* Safari */
			box-orient: vertical;
			-webkit-box-pack: center;
			/* Safari */
			justify-content: center;
			padding-top: 60rpx;
			/* Standard syntax */
		}


		.back-time {
			// padding: 280rpx 0;
			padding-top: 200rpx;
			padding-bottom: 60rpx;

			.back-f {
				border: 4rpx solid #fff;
				border-radius: 10rpx;
				font-size: 34rpx;
				color: #fff;
				text-align: center;
				width: 100rpx;
				// height: 100rpx;
			}

			.back-s {
				width: 180rpx;
				color: #fff;
			}
		}

		.back-foot {
			display: flex;
			justify-content: space-between;

			.back-title {
				// display: flex;
				color: #fff;
				font-size: 28rpx;
				padding-top: 40rpx;

				>view {
					margin-bottom: 40rpx;
				}
			}

			.back-wx {

				img {
					border: 8rpx solid #1F59EC;
					border-radius: 6rpx;
					width: 180rpx;
					height: 180rpx;
				}
			}
		}

	}


}
</style>